<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章详情',active='home'">
<head th:replace="layout/common::headerFragment(${title},${active})"></head>
<style>
    .user-panel{
        padding: 0 !important;
    }
    .user-panel .content{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding-bottom: 10px;
    }
    .user-panel .meta{
        padding: 0 10px;
        text-align: center;
        font-size: 13px;
        color: #6c757d;
        margin: 0.5rem 0;
    }
    .user-panel .username{
        font-weight: 600;
        text-align: center;
        font-size: 1.2rem;
        color: #222;
    }
    .user-panel .content .text{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #8590a6;
    }
    .user-panel .content .count{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.9rem;
    }
    .user-panel .avatar .user-profile-bg-wrapper{
        height: 85px;
        overflow: hidden;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
    }
    .user-panel .user-profile-bg{
        border-radius: 0.2rem 0.2rem 0 0;
        display: block !important;
    }
    .user-panel .avatar-img img{
        width: 50px;
        display: block;
        margin: 10px auto;
    }
</style>
<body>
<header th:replace="layout/common::header-body"></header>

<div class="ui main container">
    <div class="ui stackable two column grid" style="min-height: 700px;">
        <div class="twelve wide column">
            <div class="ui segment">
                <div class="ui breadcrumb">
                    <a class="section">Home</a>
                    <div class="divider"> / </div>
                    <a class="section">Store</a>
                    <div class="divider"> / </div>
                    <div class="active section">T-Shirt</div>
                </div>
                <h1>asdf</h1>
                <p>asdfkjl;jasdkfjaskdfljdks;asdfjkasd;fjkas;dfjka;lsdfjka;sd
                    asdfjk;jkasd;fjkasd;fjk
                    asdfjk;asjdkf;ljasdkflajskdf;aksdf;ljkasd;jfk</p>
            </div>
        </div>

        <div class="four wide column">
            <div class="ui segment user-panel">
                <div class="avatar center aligned">
                    <a href="/u/saonian" class="avatar-img">
                        <img class="ui circular image" src="https://onebugman.cn/semantic-ui/examples/assets/images/wireframe/square-image.png">
                    </a>
                </div>
                <div class="username">allenhu</div>
                <div class="meta">
                    <p>just do it</p>
                </div>
                <div class="content">
                    <div class="">
                        <div class="text">
                            文章
                        </div>
                        <div class="count">
                            123
                        </div>
                    </div>
                    <div class="">
                        <div class="text">
                            回复
                        </div>
                        <div class="count">
                            123
                        </div>
                    </div>
                    <div class="">
                        <div class="text">
                            粉丝
                        </div>
                        <div class="count">
                            123
                        </div>
                    </div>
                    <div class="">
                        <div class="text">
                            关注
                        </div>
                        <div class="count">
                            123
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui segment">
                <h2>hello</h2>
            </div>
        </div>
    </div>
</div>

<footer th:replace="layout/common::footer-body"></footer>

<script>
    $('[data-content]').popup();
</script>
</body>
</html>